<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        margin: 10px;
        width: 500px;
        height: 800px;
        border: 1px solid red;
        display: flex;
        column-gap: 5px;
        overflow: auto;
      }
      .img-column {
        flex: 1;
        border: 1px solid cyan;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="img-column"></div>
      <div class="img-column"></div>
      <div class="img-column"></div>
    </div>

    <script>
      let imgList = [
        "./img/1.jpeg",
        "./img/2.jpg",
        "./img/3.jpg",
        "./img/4.jpg",
        "./img/5.jpg",
        "./img/6.jpg",
        "./img/7.jpg",
        "./img/8.jpg",
        "./img/9.jpg",
        "./img/10.jpg",
        "./img/11.jpg",
        "./img/12.jpg",
      ];

      const createWaterfall = (container, items, column = 3) => {
        // 上来先清空容器
        document.querySelector(container).innerHTML = "";

        // 创建列
        let columnElements = [];
        for (let i = 0; i < column; i++) {
          let column = document.createElement("div");
          column.className = "img-column";
          document.querySelector(container).appendChild(column);
          columnElements.push({ element: column, height: 0 });
        }

        // 3. 往最短列塞内容
        items.forEach((item) => {
          // 找出当前最短的列
          const shortestColumn = columnElements.reduce((prev, curr) => {
            // 比较高度，返回最小的列
            // A列与B列比较，若A列小于B列，则返回A列，否则返回B列
            // prev是前一个元素，curr是当前元素
            // reduce会遍历所有对象，也就是说这个比对会针对所有的列进行
            // 最后会返回一个对象，这个对象是高度最小的列
            return prev.height < curr.height ? prev : curr;
          });

          // 创建内容块
          const itemElement = document.createElement("div");
          // 创建img标签
          const img = document.createElement("img");
          img.src = item;
          img.style.width = "100%";
          img.style.height = "auto";
          //   将img标签添加到内容块中
          itemElement.appendChild(img); // 这里可以是图片或任意内容

          // 插入到最短列并更新高度
          shortestColumn.element.appendChild(itemElement);

          console.log(itemElement.offsetHeight);

          // 计算当前列的高度
          // 这里的offsetHeight是元素的高度，包括元素的内容、内边距和边框，但是不包括外边距。
          shortestColumn.height += itemElement.offsetHeight;
        });
      };

      createWaterfall(".container", imgList, 3);
    </script>
  </body>
</html>
